﻿<MRow Justify="JustifyTypes.Center" Align="AlignTypes.Center">
    <MCol Cols="12" Md="6">
        <MMobilePickerView @bind-Value="_value"
                           Columns="@Columns"
                           TColumn="Data"
                           TColumnItem="Data"
                           TColumnItemValue="string"
                           ItemValue="item => item.Code"
                           ItemText="item => item.Name"
                           ItemChildren="item => item.Children"
                           ItemDisabled="item => item.Disabled"
                           OnSelect="@HandleOnSelect">
        </MMobilePickerView>
    </MCol>
    <MCol Cols="12" Md="6" Class="text-center">
        @(_selected.Any() ? "Selected:" + string.Join(" ", _selected.Select(s => s.Name)) : "Please select")
    </MCol>
</MRow>

@code {

    List<string> _value = new();
    List<Data> _selected = new();

    void HandleOnSelect(List<Data> selected)
    {
        _selected = selected;
    }

    record Data(string Code, string Name, List<Data> Children = null, bool Disabled = false);

    static readonly List<Data> Columns = new()
    {
        new Data("bj", "北京", new List<Data>
        {
            new("bj-hd", "海淀区", new List<Data>
            {
                new("", "")
            }),
            new("bj-sy", "顺义区", new List<Data>
            {
                new("", "")
            }),
            new("bj-sjs", "石景山区", new List<Data>
            {
                new("", "")
            })
        }),
        new Data("sh", "上海", new List<Data>
        {
            new("sh-sh", "上海", new List<Data>
            {
                new("sh-sh-hp", "黄浦区"),
                new("sh-sh-xh", "徐汇区"),
                new("sh-sh-cn", "长宁区"),
                new("sh-sh-ja", "静安区", Disabled: true)
            })
        }),
        new Data("zj", "浙江", new List<Data>
        {
            new("zj-hz", "杭州", new List<Data>
            {
                new("zj-hz-sc", "上城区"),
                new("zj-hz-xc", "下城区"),
                new("zj-hz-qt", "钱塘区")
            }),
            new("zj-nb", "宁波", new List<Data>
            {
                new("zj-nb-jb", "江北区"),
                new("zj-nb-hs", "海曙区"),
                new("zj-nb-bl", "北仑区")
            })
        }),
        new Data("gd", "广东", new List<Data>
        {
            new("gd-sz", "深圳", new List<Data>
            {
                new("gd-sz-ns", "南山区"),
                new("gd-sz-lh", "罗湖区")
            }),
            new("gd-gz", "广州", new List<Data>
            {
                new("gd-gz-by", "白云区"),
                new("gd-gz-th", "天河区"),
                new("gd-gz-hz", "海珠区")
            })
        })
    };

}
